<!--
* @author wn
* @date 2024/03/25 11:21:09
* @description: 自定义 日期 时间 组件
!-->
<template>
	<picker
		mode="multiSelector"
		@change="doChange"
		@columnchange="doColumnChange"
		:value="self_value"
		:range="self_range"
	>
		<input
			:disabled="true"
			placeholder-style="color:#bbbbbb"
			:placeholder="placeholder"
			:value="value_text"
		/>
	</picker>
</template>
<script setup>
import { ref, onBeforeMount, toRaw, watch } from 'vue'
import FormatFn from '@/utils/dateFormat'
const props = defineProps({
	timestamp: {
		type: Number,
		default: 0,
	},
	emptyText: {
		type: String,
		default: '',
	},
	placeholder: {
		type: String,
		default: '',
	},
})
const emit = defineEmits(['dtPickerChanged'])
// 当前时间
const now = new Date().getTime()
const self_range = ref([])
let self_days = null
let self_days_text = ''
let self_hours = null
let self_seconds = null
const self_value = ref([0, 0, 0])
const value_text = ref()
onBeforeMount(() => {
	const days = ['']
	const days_text = [props.emptyText]
	for (let i = 0; i < 20; i++) {
		days.push(TIME_FORMAT(now + 86400000 * i, 'YYYY-MM-dd'))
		let text = TIME_FORMAT(now + 86400000 * i, 'M月d日')
		if (i == 0) {
			text += ' （今天）'
		}
		if (i == 1) {
			text += ' （明天）'
		}
		if (i == 2) {
			text += ' （后天）'
		}
		days_text.push(text)
		const hours = [
			'00',
			'01',
			'02',
			'03',
			'04',
			'05',
			'06',
			'07',
			'08',
			'09',
			'10',
			'11',
			'12',
			'13',
			'14',
			'15',
			'16',
			'17',
			'18',
			'19',
			'20',
			'21',
			'22',
			'23',
		]
		const seconds = [
			'00',
			'01',
			'02',
			'03',
			'04',
			'05',
			'06',
			'07',
			'08',
			'09',
			'10',
			'11',
			'12',
			'13',
			'14',
			'15',
			'16',
			'17',
			'18',
			'19',
			'20',
			'21',
			'22',
			'23',
			'24',
			'25',
			'26',
			'27',
			'28',
			'29',
			'30',
			'31',
			'32',
			'33',
			'34',
			'35',
			'36',
			'37',
			'38',
			'39',
			'40',
			'41',
			'42',
			'43',
			'44',
			'45',
			'46',
			'47',
			'48',
			'49',
			'50',
			'51',
			'52',
			'53',
			'54',
			'55',
			'56',
			'57',
			'58',
			'59',
		]
		const range = []
		range[0] = days_text
		range[1] = hours
		range[2] = seconds
		self_range.value = range
		self_days = days
		self_days_text = days_text
		self_hours = hours
		self_seconds = seconds
	}
})
const doChange = () => {
	value_text.value = getValueText()
	var day = self_days[self_value.value[0]]
	var hour = self_hours[self_value.value[1]]
	var second = self_seconds[self_value.value[2]]
	var datetime = ''
	if (day) {
		datetime = day + ' ' + hour + ':' + second
	}
	var timestamp = 0
	if (datetime) {
		timestamp = new Date(datetime.replace(/-/g, '/')).getTime()
	}

	emit('dtPickerChanged', {
		detail: {
			value: timestamp,
		},
	})
}
const doColumnChange = e => {
	var value = self_value.value
	value[e.detail.column] = e.detail.value
	self_value.value = value
}
const TIME_FORMAT = (t, fmt) => {
	const newDate = new Date()
	newDate.setTime(t)
	return FormatFn(fmt)
}
const timestampChange = timestamp => {
	// 未初始化时不执行
	if (!self_days) {
		return
	}
	if (timestamp > 0) {
		var days = self_days
		var days_text = self_days_text
		var hours = self_hours
		var seconds = self_seconds
	}
	if (timestamp < now) {
		timestamp = now
	}
	var date = TIME_FORMAT(timestamp, 'YYYY-MM-dd')
	var hour = TIME_FORMAT(timestamp, 'hh')
	var minutes = TIME_FORMAT(timestamp, 'mm')
	var value = toRaw(self_value.value)
	for (var i = 0; i < days.length; i++) {
		if (date == days[i]) {
			value[0] = i
			break
		}
	}
	for (var i = 0; i < hours.length; i++) {
		if (hour == hours[i]) {
			value[1] = i
			break
		}
	}
	// console.log('VP---D>'+value[1]);
	for (var i = 0; i < seconds.length; i++) {
		if (minutes == seconds[i]) {
			value[2] = i
			break
		}
	}
	self_value.value = value
	value_text.value = getValueText()
}
const getValueText = () => {
	var day = self_days_text[self_value.value[0]]
	var hour = self_hours[self_value.value[1]]
	var second = self_seconds[self_value.value[2]]
	if (self_days[self_value.value[0]] == '') {
		return day
	} else {
		return day + ' ' + hour + ':' + second
	}
}
watch(
	() => props.timestamp,
	nd => {
		timestampChange(nd)
	},
	{ immediate: true }
)
</script>
<style lang="scss">
input {
	height: 70rpx;
	line-height: 70rpx;
}
</style>
